<html class="tutorial">
<head>
	<title>MonoTouch Examples :: RemoteInfo</title>
    <link rel="stylesheet" type="text/css" href="../css/default.css" />
    <link rel="stylesheet" type="text/css" href="../css/remoteinfo.css" />
</head>
<body class="large">
	<a id="title-img" href="http://www.servicestack.net"><img src="../img/MonoTouch-ServiceStack.png" alt="MonoTouch ServiceStack"></a>
	<h3 class="step"><a href="default.htm">MonoTouch tutorial</a> Step 3 - Calling the Web Service from MonoTouch</h3>

	<div class="section">

	<h4>Setting up the RemoteInfoClient MonoTouch project</h4>
	<p>
		The Mono team has done a pretty good job keeping the full C# development experience without
		having too many <a href="http://monotouch.net/Documentation/Limitations">limitations</a>
		when developing with MonoTouch.
	</p>
	<p>
		One such limitation is trying to reference Mono Develop projects that target the Framework 3.5.
		Which we would ideally like to do to access the <b class="proj">RemoteInfo.ServiceModel</b> project.
		Thankfully working around this is easy as you can just add a reference to the 'RemoteInfo.ServiceModel.dll'
		located in the 'bin/Debug' output folder directly. Other than that the only dependency you'll need is
		a reference to the 'ServiceStack.Client.dll' which is a light-weight assembly containing the ServiceClients
		required to access XML and JSON Web Services.
	</p>
	<p>
		The MonoTouch example application provided is a standard MonoTouch application that just contains a
		<b>navigationController</b> and a <b>TableViewController</b> and is based on samples from the tutorials below:
		<ul>
			<li>(video) <a href="http://www.vimeo.com/6689472">Building an IPhone RSS Reader Application using MonoTouch</a></li>
			<li>(tutorial) <a href="http://www.alexyork.net/blog/post/UINavigationController-with-MonoTouch-Building-a-simple-RSS-reader-Part-1.aspx">
				UINavigationController with MonoTouch - Building a simple RSS reader
			</a></li>
		</ul>
	</p>
	<p>
		With the required references set we can start. Even though there is no concept of an App.config file for
		MonoTouch projects, I still prefer to keep all my app's configuration within a single class.
		So in keeping the same spirit I've defined the Service Client for my app in <b class="cs">AppConfig.cs</b>.
	</p>
	<img src="../img/mt-AppConfig.png" />

	<p>
		The only custom class class used for this first example is the <b class="cs">RemoteFilesTableViewController.cs</b>
		custom TableViewController class:
	</p>

	<img src="../img/tvc-viewdidload.png" alt="Custom TableViewController" class="left-wtext" />
	<p>
		Which is effectively standard custom TableViewController class with just 2 properties:
		<code>string CurrentPath { get; set; }</code>
		to hold the CurrentPath that this TableView is displaying
		<code>List&lt;object&gt; Items { get; set; }</code>
		which holds the list of Items available at the <b>CurrentPath</b>.
	</p>
	<p>
		The actual Web Service call is made in <code>void ViewDidLoad ()</code> method which makes a request
		for the <b>DirectoryInfo</b> available at the <b>CurrentPath</b>. The results of the Web Service are then stored
		in the <b>Items</b> property.
	</p>

	<p class="clear">
		Rendering the TableView is the responsibility of the nested TableView <b>DataSource</b> class below:
	</p>

	<img src="../img/tvc-datasource.png" alt="TableView DataSource" class="left-wtext" />

	<p>
		As it was based on the template from the tutorials above, it is a nested class named <b class="cs">DataSource</b>
		contained within the <b>RemoteFilesTableViewController</b>.
	</p>
	<p>
		The logic for the DataSource class is pretty simple. It basically just iterates through each item and determines whether
		it's a <b>File</b> or a <b>Directory</b>. If it's a directory then we indicate to the user that they can navigate deeper
		by setting the cell to display a <b>DisclosureIndicator</b>. Directories are also prefixed with a '/' and their text
		is set to a Dark Green to provide more visual cues that they are different to a <b>FileResult</b>.
	</p>

	<p class="clear">
		Handling the row selection is the responsibility of the nested TableView <b>TableDelegate</b> class below:
	</p>
	<img src="../img/tvc-delegate.png" alt="TableView Delegate" class="left-wtext" />

	<p>
		The <b>TableDelegate</b> like its <b>DataSource</b> sibling is also a nested class which allows you to provide
		 custom handlers to handle <b>TableViewController</b> events.
	</p>
	<p>
		Our implementation is quite simple we just Write to the Console the index of the row that was selected and
		if a directory was selected we determine its 'full path' and pass that into a new instance of
		<b>RemoteFilesTableViewController</b> which will be displayed on the screen.
	</p>

	<p class="clear">
		So far that's all there is to it. To test it make sure you have XSP running, then select the 'Debug|iPhoneSimulator'
		configuration profile and set <b>RemoteInfoClient</b> as the 'Startup Project'. If all is well when you hit <b>Debug</b>
		you should have a running MonoTouch application that looks like the one below:
	</p>

	<img src="../img/mt-debug-root.png" class="left" />
	<img src="../img/mt-debug-server.png" class="left" />
	<img src="../img/mt-debug-servicemodel.png" class="left" />
	<img src="../img/mt-debug-operations.png" class="left" />

	<p class="clear">
		Now where getting somewhere, we now have a MonoTouch application calling XML Web Services!
		Since we're on a roll, lets see how easy it is to create a new Web Service.
	</p>

	</div>

	<div class="page-nav">
		<div class="previous">
			<a href="step2.htm">&lt; Step 2 - Calling the GetDirectoryInfo Web Service</a>
		</div>
		<div class="next">
			<a href="step4.htm">Step 4 - Creating a new Web Service &gt;</a>
		</div>
	</div>

<div id="footer">
	Copyright &copy; 2010 Liquidbit Limited. All rights reserved.
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7722718-7");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>